<!-- task-calendar.vue -->
<template>
	<view class="task-calendar">
		<!-- 日历组件 -->
		<uni-calendar :insert="true" :lunar="false" :selected="getMarkedDates()" @change="dateChange"
			@monthSwitch="monthSwitch" />

		<!-- 当天任务列表 -->
		<view class="task-list" v-if="selectedDate">
			<view class="date-header">
				<text>{{ formatSelectedDate(selectedDate) }}</text>
			</view>

			<!-- 筛选后的任务列表 -->
			<scroll-view scroll-y="true" class="task-scroll">
				<block v-if="currentDayTasks.length > 0">
					<view v-for="task in currentDayTasks" :key="task.taskId" class="task-group">
						<!-- 父任务 -->
						<view class="task-item" :class="[getTaskStatusClass(task)]" @click="toggleTask(task)">
							<view class="task-main">
								<view class="task-info">
									<text class="task-name">{{ task.taskName }}</text>
									<text class="project-tag">{{ task.projectName }}</text>
								</view>
								<view class="task-arrow" v-if="task.sons && task.sons.length">
									<text :class="{'rotated': task.expanded}">›</text>
								</view>
							</view>
						</view>

						<!-- 子任务列表 -->
						<view class="subtask-list" v-if="task.sons && task.sons.length && task.expanded">
							<view v-for="subTask in task.sons" :key="subTask.taskId" class="subtask-item"
								:class="[getTaskStatusClass(subTask)]" @click="handleTaskClick(subTask)">
								<view class="subtask-content">
									<text class="task-name">{{ subTask.taskName }}</text>
								</view>
							</view>
						</view>
					</view>
				</block>

				<!-- 没有任务时显示 -->
				<view class="no-task" v-else>
					<text>暂无任务安排</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TaskCalendar',
		props: {
			tasks: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				selectedDate: '',
			}
		},
		computed: {
			currentDayTasks() {
				if (!this.selectedDate) return [];

				// 深拷贝任务数组，避免修改原数据
				const processedTasks = JSON.parse(JSON.stringify(this.tasks));

				return this.processTasksByDate(processedTasks, this.selectedDate);
			}
		},
		methods: {
			// 处理任务数据
			processTasksByDate(tasks, date) {
				return tasks.filter(task => {
					const isCurrentDateTask = task.dueDate === date;

					if (task.sons && task.sons.length) {
						// 处理子任务
						const filteredSons = this.processTasksByDate(task.sons, date);
						task.sons = filteredSons;
						// 如果自身日期匹配或有匹配的子任务，则保留
						return isCurrentDateTask || filteredSons.length > 0;
					}

					return isCurrentDateTask;
				}).map(task => {
					// 为每个任务添加expanded属性，如果之前有则保留状态
					return {
						...task,
						expanded: task.expanded === undefined ? false : task.expanded
					};
				});
			},

			// 格式化选中日期显示
			formatSelectedDate(dateString) {
				const date = new Date(dateString);
				const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				return `${date.getMonth() + 1}月${date.getDate()}日 ${weekDays[date.getDay()]}`;
			},

			// 获取标记日期
			getMarkedDates() {
				const dates = new Set();

				const collectDates = (tasks) => {
					tasks.forEach(task => {
						dates.add(task.dueDate);
						if (task.sons && task.sons.length) {
							collectDates(task.sons);
						}
					});
				};

				collectDates(this.tasks);
				return Array.from(dates).map(date => ({
					date,
					info: '有任务'
				}));
			},

			// 获取任务状态样式
			getTaskStatusClass(task) {
				// 根据实际任务状态返回对应的样式类
				switch (task.status) {
					case '111':
						return 'task-completed';
					case '110':
						return 'task-in-progress';
					case '112':
						return 'task-expired';
					default:
						return '';
				}
			},

			// 切换任务展开状态
			toggleTask(task) {
				if (task.sons && task.sons.length) {
					this.$set(task, 'expanded', !task.expanded);
				} else {
					this.handleTaskClick(task);
				}
			},

			// 处理任务点击
			handleTaskClick(task) {
				this.$emit('task-click', task);
			},

			// 日期变化处理
			dateChange(e) {
				this.selectedDate = e.fulldate;
				this.$emit('date-change', e.fulldate);
			},

			// 月份切换处理
			monthSwitch(e) {
				this.$emit('month-switch', {
					year: e.year,
					month: e.month
				});
			}
		},
		mounted() {
			// 初始化选中今天
			const today = new Date();
			const year = today.getFullYear();
			const month = String(today.getMonth() + 1).padStart(2, '0');
			const day = String(today.getDate()).padStart(2, '0');
			this.selectedDate = `${year}-${month}-${day}`;
		}
	}
</script>

<style lang="scss">
	.task-calendar {
		background: #fff;

		.task-list {
			padding: 0 16px;
			margin-top: 12px;

			.date-header {
				padding: 12px 0;
				border-bottom: 1px solid #eee;
				margin-bottom: 12px;

				text {
					font-size: 16px;
					color: #333;
					font-weight: 500;
				}
			}

			.task-scroll {
				max-height: calc(100vh - 480px);
			}

			.task-group {
				margin-bottom: 12px;
			}

			.task-item {
				padding: 12px;
				border-radius: 8px;
				background: #f8f9fa;
				margin-bottom: 2px;

				.task-main {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.task-info {
						flex: 1;
						display: flex;
						align-items: center;
						gap: 8px;

						.task-name {
							font-size: 14px;
							color: #333;
						}

						.project-tag {
							font-size: 12px;
							padding: 2px 6px;
							background: rgba(0, 0, 0, 0.05);
							border-radius: 4px;
							color: #666;
						}
					}

					.task-arrow {
						width: 24px;
						height: 24px;
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							font-size: 18px;
							color: #999;
							transition: transform 0.2s ease;

							&.rotated {
								transform: rotate(90deg);
							}
						}
					}
				}
			}

			.subtask-list {
				margin-left: 12px;

				.subtask-item {
					padding: 10px 12px;
					margin-top: 2px;
					border-radius: 6px;
					background: rgba(248, 249, 250, 0.6);

					.subtask-content {
						display: flex;
						align-items: center;

						&::before {
							content: '';
							width: 4px;
							height: 4px;
							border-radius: 50%;
							background: #999;
							margin-right: 8px;
						}

						.task-name {
							font-size: 13px;
							color: #333;
						}
					}
				}
			}

			// 任务状态样式
			.task-cancelled {
				background: #fff8e0;

				.task-info {
					.task-name {
						color: #333;
					}

					.project-tag {
						background: rgba(0, 0, 0, 0.05);
						color: #666;
					}
				}
			}

			.task-completed {
				background: #e8fde0;

				.task-info {
					.task-name {
						color: #333;
					}

					.project-tag {
						background: rgba(0, 0, 0, 0.05);
						color: #666;
					}
				}
			}

			.task-in-progress {
				background: #edf7f8;

				.task-info {
					.task-name {
						color: #333;
					}

					.project-tag {
						background: rgba(0, 0, 0, 0.05);
						color: #666;
					}
				}
			}

			.task-expired {
				background: #d9d9d9;

				.task-info {
					.task-name {
						color: #333;
					}

					.project-tag {
						background: rgba(0, 0, 0, 0.05);
						color: #666;
					}
				}
			}

			.no-task {
				padding: 32px 0;
				text-align: center;
				color: #999;
				font-size: 14px;
			}
		}
	}
</style>